<template>
  <div class="newslist">
    <div class="newsListUp">
      <!-- 公告搜索 -->
      <!-- <div class="seach">
        <el-input
          placeholder="请输入搜索内容"
          clearable
          v-model="inputSeach"
          class="seachInput"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div> -->
      <!-- 日期范围搜搜 -->
      <!-- <div class="block">
        <el-date-picker
          v-model="value"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-button type="primary" class="typeBtn">查询</el-button>
        <el-button type="success" class="typeBtn">重置</el-button>
      </div> -->
    </div>

    <!-- 公告列表 -->
    <div class="list">
      <el-table :data="listdata" border style="width: 100%">
        <el-table-column type="index" width="50" align="center">
        </el-table-column>
        <el-table-column prop="messElements" label="公告标题" align="center">
        </el-table-column>
        <el-table-column prop="messDistribute" label="推送人" align="center">
        </el-table-column>
        <el-table-column prop="messReceive" label="接收人" align="center">
        </el-table-column>
        <el-table-column
          prop="messConfirmed"
          label="已确认接收人"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="messPublishtime" label="发布时间" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <!-- <el-button type="text" size="small">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagelist">
      <PageList />
    </div>
  </div>
</template>

<script>
import mitt from "@/utils/mitt";
import PageList from "../tableMenu/PageList.vue";
import { newInfo } from "@/network/api/news/news";
import News from "./News.vue";
import router from "@/router";

export default {
  name: "NewsList",
  components: {
    PageList,
    News,
  },
  data() {
    return {
      value: "",
      inputSeach: "",
      tableData: [],
      info: {},
      listdata: [],
    };
  },
  created() {
    this.menu();
    this.newdata();
    // let UnreadMessage = await unreadMessage();
    // console.log(UnreadMessage, "未读消息");
  },
  methods: {
    async newdata() {
      let infodata = await newInfo();
      console.log(infodata);
      this.listdata = infodata.data.data.messages;
      this.listdata.forEach((item) => {
        item.messPublishtime = item.messPublishtime.slice(0, 10);
      });
    },
    menu() {
      mitt.on("personal", (res) => {
        console.log(res);
        this.info = res;
      });
    },
    handleClick(row) {
      console.log(row);
      router.push({ path: "news", query: { data: row } });
    },
  },
};
</script>

<style scoped lang='scss'>
.newslist {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  .newsListUp {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    // 搜索
    .seach {
      width: 30%;
      margin-right: 50px;
    }
    .typeBtn {
      width: 100px;
      height: 30px;
      padding: 0;
      text-align: center;
      font-size: 12px;
      margin-left: 20px;
    }
  }
  .pagelist {
    margin-top: 20px;
    text-align: center;
  }
  .newsdata {
    width: 100%;
    height: 200px;
    position: absolute;
    top: 10px;
    left: 0;
  }
}
</style>